<!DOCTYPE html>
<html
        layout:decorator="component/mainLayout"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <title>订单统计</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>

<body layout:fragment="contentCenter">
<table id="orderListTable" lay-filter="tableFilter"></table>

<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-normal" lay-event="orderListEchart" id="deliverGood-btn">近期零售图表</button>
</script>
<script>
    $(document).ready(function () {
        sliderCollapse.open('#orderCollapse');
    })
    layui.use(['table','jquery','element','form','layer'], function(){
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , element = layui.element;
        table.render({
            elem: '#orderListTable'
            ,url:'/order/getAllOrderList'
            ,toolbar: '#toolbarDemo'
            // ,toolbar: 'true'
            // ,defaultToolbar: ['filter', 'print', 'exports']
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,title: '货物数据表'
            ,limit:20
            ,totalRow:true
            ,cols: [        //  "[["需要将两个括号拆开换行，因为[[…]]之间的表达式在Thymeleaf被认为是内联表达式
                [
                    {field:'orderId', title:'订单ID', width:300, unresize: true,align:'center'}
                    ,{field:'totalAmount', title:'订单总价（元）', width:200,align:'center'}
                    ,{field:'staffId', title:'员工ID',sort: true,align:'center'}
                    ,{field:'createDatetime', title:'创建时间', width:200,sort: true,align:'center'}
                ]]
            ,page: true,id:'orderListTableId',
        });


        table.on('toolbar(tableFilter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            switch(obj.event){
                case 'orderListEchart':
                    layer.open({
                        title:'销售图表',
                        type:2,
                        area: ['800px','600px'],
                        shift:2,
                        content:'/admin/orderListEchart',
                        closeBtn:2,
                        btn:false
                    })
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

    })

</script>
</body>
</html>